<template>
	<view class="offerings-layout">
		<view class="item-layout1">
			<image class="candle" v-if="showCandle"></image>
			<image class="flower" v-if="showFlower"></image>
			<image class="incense" v-if="showIncense"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageUrl: process.env.NODE_ENV === 'development' ? this.$config.imageUrl.dev : this.$config.imageUrl.pro,
			offerings: []
		};
	},
	props: {
		hallId: {
			type: Number,
			default: 0
		}
	},
	computed: {
		showIncense() {
			return this.offerings.some(item => item.offeringId == 1);
		},
		showCandle() {
			return this.offerings.some(item => item.offeringId == 2);
		},
		showFlower() {
			return this.offerings.some(item => item.offeringId == 3);
		}
	},
	methods: {
		/* 查询当前有效供品记录 */
		loadOfferings() {
			if (!this.hallId) {
				return;
			}
			this.$http.get('/worship-record/effective-list', { params: { hallId: this.hallId } }).then(res => {
				if (res.code === 200) {
					this.offerings = res.data;
				}
			});
		}
	},
	mounted() {
		this.loadOfferings();
	}
};
</script>

<style lang="scss" scoped>
@import './offerings.scss';
</style>
